<template>
  <VGroup>
    <el-select
      class="selectClass"
      v-model="modelValue.type"
      :style="{ width: `${leftWdiths}px` }"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>

    <template v-if="rightLabel == 'input'">
      <el-input
        v-model="modelValue.value"
        placeholder="请输入"
        class="w-50"
        v-bind="$attrs"
      ></el-input>
    </template>
    <template v-else-if="rightLabel == 'time'">
      <el-date-picker
        v-model="modelValue.value"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
        v-bind="$attrs"
        :default-time="[
          new Date(2000, 1, 1, 0, 0, 0),
          new Date(2000, 2, 1, 23, 59, 59),
        ]"
      />
    </template>
    <template v-else>
      <slot name="right" />
    </template>
  </VGroup>
</template>
<script setup>
import othersData from "@/data/search.js";
// {type:null,value:null}
const { leftWidth, rightLabel, type, modelValue } = defineProps([
  "leftWidth",
  "rightLabel",
  "type",
  "modelValue",
]);
const emits = defineEmits(["update:modelValue"]);
const options = computed(() => {
  if (type) {
    return othersData?.[type] || [];
  }
  return [];
});
const leftWdiths = computed(() => {
  return leftWidth || 100;
});
watchEffect(() => {
  emits("update:modelValue", modelValue);
});
</script>
<style lang="scss" scoped></style>
